<template>
  <div class="douban">
    <h3>{{biaoti}}</h3>
    <!-- 正文内容 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="影视列表">
        <template slot-scope="scope">
          <div class="douban_main">
            <ul class="grid_view">
              <li>
                <div class="item">
                  <div class="pic">
                      <a href="https://movie.douban.com/subject/1292052/">
                        <img width="100" :alt="The_title" :src="img_small" class="">
                      </a>
                  </div>
                  <div class="info">
                    <div class="hd">
                      <a href="https://movie.douban.com/subject/1292052/" class="">
                        <span class="title">{{The_title}}</span>
                        <span class="title">&nbsp;/&nbsp;{{English_title}}</span>
                        <span class="other">&nbsp;/&nbsp;月黑高飞(港)  /  刺激{{year}}年</span>
                      </a>
                      <span class="playable">[可播放]</span>
                    </div>
                    <div class="bd">
                      <p class="">
                        导演: {{director}}&nbsp;&nbsp;&nbsp;主演: {{starring1}}/{{starring2}}/{{starring3}}<br>
                        {{year}}&nbsp;/&nbsp;美国&nbsp;/&nbsp;{{The_type}}
                      </p>
                      <div class="star">
                        <span class="rating5-t"></span>
                        <span class="rating_num" property="v:average">{{score}}</span>
                        <span property="v:best" content="10.0"></span>
                        <span>{{evaluation}}人评价</span>
                      </div>
                      <p class="quote">
                        <span class="inq">“希望让人自由。”</span>
                      </p>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <Page :total="total" :page-size="pagesize" show-total @on-change="loginPost" style="margin-bottom:15px;"></Page>
    </div>
  </div>
</template>

<script>
import http from "../../http/https.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      index: 0,
      pagesize: 13, //每页展示的行数
      total: 15, // 总数据量
      tableData: [],
      biaoti: "", // 标题
      img_small: null, // 图片
      The_title: "", // 影片名称(中文)
      English_title: "", // 影片名称(英文)
      year: "", // 上映年份
      director: "", // 电影导演
      starring1: "", // 主演1
      starring2: "", // 主演2
      starring3: "", // 主演3
      The_type: [], // 类型
      evaluation: "", // 评价
      score: null // 评分
    };
  },
  watch: {},
  computed: {},
  methods: {
    loginPost(index) {
      this.transition();
      this.$axios
        .get("/movie/top250")
        .then(res => {
          console.log(res);
          this.tableData = res.data.subjects; // 数据数组
          this.total = res.data.total; // 总数据量
          // this.pagesize = res.data.count; // 每页展示的条数
          this.biaoti = res.data.title; // 标题
          this.img_small = res.data.subjects[index].images.small;
          this.The_title = res.data.subjects[index].title;
          this.English_title = res.data.subjects[index].original_title;
          this.year = res.data.subjects[index].year;
          this.director = res.data.subjects[index].directors[0].name;
          this.starring1 = res.data.subjects[index].casts[0].name;
          this.starring2 = res.data.subjects[index].casts[1].name;
          this.starring3 = res.data.subjects[index].casts[2].name;
          this.The_type = JSON.stringify(res.data.subjects[index].genres);
          this.evaluation = res.data.subjects[index].id;
          this.score = res.data.subjects[index].rating.average;
        })
        .catch(err => {
          console.log(err + "数据连接失败");
        });
    },
    // 过度动画
    transition() {
      this.$Spin.show({
        render: h => {
          return h("div", [
            h("Icon", {
              class: "demo-spin-icon-load",
              props: {
                type: "ios-loading",
                size: 18
              }
            }),
            h("div", "正在加载中...")
          ]);
        }
      });
      setTimeout(() => {
        this.$Spin.hide();
      }, 500);
    }
  },
  created() {},
  mounted() {
    this.loginPost(0);
  }
};
</script>
<style scoped>
.grid_view {
  border-top: 1px dashed #ccc;
  padding-left: 0;
}
.grid_view li {
  overflow: hidden;
  list-style: none;
  border-bottom: 1px dashed #ccc;
  padding: 12px 0;
}
/* 图片属性 */
.grid_view .pic {
  color: #bbb;
  float: left;
  padding-right: 25px;
}
/* 标识 */
.grid_view .pic em {
  float: left;
  padding: 0 10px;
  font-style: normal;
}
/* 左边详情 */
.grid_view .info {
  overflow: hidden;
  zoom: 1;
  text-align: left;
}
a:visited {
  color: #666699;
  text-decoration: none;
}
a:link {
  color: #37a;
  text-decoration: none;
}
a {
  cursor: pointer;
}
.grid_view .info a:link span {
  color: #369;
}
.grid_view .info .title {
  font: 14px/150% Arial, Helvetica, sans-serif;
}
.item .playable {
  font-size: 13px;
  padding-left: 3px;
  color: #00a65f;
}
.info p {
  margin: 10px 0;
  color: #666;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.star .rating_num {
  color: #e09015;
  padding: 0 5px 0 0;
}
.quote span.inq {
  color: #666;
  text-align: left;
}
.quote {
  overflow: hidden;
  padding: 0 24px 5px 15px;
  margin: 8px 0 0 26px;
  background: url(/f/shire/bea926c…/pics/quotel.png) no-repeat left 4px;
  width: auto;
  *zoom: 1;
  word-wrap: break-word;
}
.paging {
  margin-top: 15px;
  padding-right: 15px;
  text-align: right;
}
</style>